<script setup>
import { reactive, onMounted } from 'vue'

/* 
步骤分析：
1-加载完毕后  监听鼠标移动
2-执行鼠标移动回调函数
3-获取坐标
4-显示坐标
*/
/* 1 */
/* 2 回调函数*/
/* 定义数据 */
const obj = reactive({
  x: 0,
  y: 0
})
const handle = (e) => {
  console.log(e.pageX, 99);
  obj.x = e.pageX
  obj.y = e.pageY
}
onMounted(() => {
  window.addEventListener('mousemove', handle)
})

</script>
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3
    <div>X:{{ obj.x }}</div>
    <div>Y:{{ obj.y }}</div>
  </div>
</template>
<style lang='less'  scoped>
</style>